<template>
  <div class="container">
    <div class="item" ref="cardRef1"></div>
    <div class="item" ref="cardRef2"></div>
    <div class="item" ref="cardRef3"></div>
  </div>
</template>

<script setup lang="ts">
// 模块引入
import { useLightCard } from './useLightCard'
defineOptions({
  // 组件名称
  name: 'LightCardComp',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})
const { cardRef: cardRef1 } = useLightCard()
const { cardRef: cardRef2 } = useLightCard({
  light: {
    color: '#fff',
    width: 100
  }
})
const { cardRef: cardRef3 } = useLightCard({
  light: {
    color: 'yellow'
  }
})
</script>

<style scoped lang="scss">
.container {
  //   background: black;
  width: 100%;
  height: 100%;
  padding: 200px;
  display: flex;
  justify-content: space-between;
  .item {
    position: relative;
    width: 125px;
    height: 125px;
    background: #1c1c1f;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}
</style>
